<template>
    <section>
        <el-row>
            <el-col :span="24">
                <el-button @click="addp" type="primary" icon="plus" size="mini"></el-button>
            </el-col>
        </el-row>
        <el-row class="cnRow">
            <div v-for="(column,index) in value" class="item clearfix">
                <el-col :span="22">
                    <el-input v-model="column.column_name" placeholder="column_name" @change="cginp"></el-input>
                </el-col>
                <el-col :span="2">
                    <el-button @click="delp(index)" type="primary" icon="minus" size="mini"></el-button>
                </el-col>
                <el-col :span="24">
                    <Attrinput type="1" v-model="column.attributes" @change="cginp"></Attrinput>
                </el-col>
            </div>
        </el-row>
    </section>
</template>

<script>
  //	import util from '../../common/util'
  import Attrinput from './Attrinput.vue'
  export default {
    components: {Attrinput},
    props: {
      value: {
        type: Array,
        default: function () {
          return [{
            column_name: '',
            attributes: [{key: '', val: ''}],
          }]
        }
      }
    },
    data() {
      return {}
    },
    methods: {
      addp(){
        this.value.push({
          column_name: '',
          attributes: [{key: '', val: ''}],
        });
        this.cginp()
      },

      delp(i){
        this.value.splice(i, 1);
        this.cginp()
      },
      cginp(){
        this.setCurrentValue(this.value)
      },
      setCurrentValue: function (value) {
        this.$emit('input', value);
        this.$emit('change', value);
      },
    },
    mounted () { }
  }
</script>

<style scoped>
  .item .el-col-6 {
    text-align: center;
  }

  .item {
    margin: 2px 0;
  }
  .cnRow .item {
    padding-right: 10px;
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px dashed #ccc;
  }

</style>